<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/css.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
</head>

<body>
<style>
    html, body {
        background: #f0f0f0 !important;
    }

    [v-cloak] {
        display: none;
    }

    .usercenter2 .userheadimgsr p {
        margin-bottom: 0;
    }

    .userheadimgsr {
        width: 100%;
    }

    .userheadimgsr2 {
        width: 200px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 10px;
        background: none;
    }

    .userheadimgsr2 .username {
        background: none;
    }

    .chongzhilo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /*margin-top: 10px;*/
    }

    .usercharge {
        color: #4D9939;
        width: 70px;
        height: 30px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        font-size: 13px;
        margin-right: 15px;
    }

    .usercharge span {
        color: #4D9939 !important;
    }

    .usercenter2 .userheadimgsl img {
        overflow: hidden;
        border-radius: 0%;
        width: 75px;
        height: 75px;
    }

    .lv {
        color: #fff;
        font-size: 12px;
        margin-right: 15px;
    }

    .usercharge {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chargestx {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .usercenter2 .userheader {
        background: #fff;
        height: 105px;
    }

    .usercenter2 .changeuserimg {
        padding-top: 0;
    }

    .usercenter2 .userheadimgsr span {
        color: #999999;
    }

    .userheadimgs {
        display: flex;
        justify-content: space-between !important;
        align-items: center;
        width: 100%;
        padding-top: 10px;
    }

    .userheadimgsr .username {
        color: #222222;
        font-size: 18px;
        font-weight: bold;
        margin-top: 5px;
    }

    .flexl {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .userheadright {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 10px;

    }

    .userheadright .icon {
        margin-right: 0;
    }

    .sjhm {
        background: #fff;
        padding-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .zwjs {
        display: flex;
        width: 100%;
        background: #fff;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    .zwjs_title {
        width: 92%;
        height: 45px;
        border-bottom: 1px solid #f8f8f8;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #333333;
        font-size: 16px;
    }

    .zwjs_desc {
        width: 92%;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .zwjs_desc input {
        border: none;
        padding: 0;
        font-size: 14px;
    }

    .zwjs_desc2 {
        display: flex;
        width: 92%;
        justify-content: flex-start;
        align-items: center;
        min-height: 50px;


    }

    .zwjs_desc2 span {

        background: rgba(248, 248, 248, 1);


        padding: 5px 20px;
        font-size: 14px;
        color: #999999;
        margin-right: 10px;
        border-radius: 3px;
    }

    .usercenter2 .forms-list {
        width: 96%;
    }

    .usercenter2 .forms-listl span {
        font-size: 14px;
    }

    .usercenter2 .forms-listr {
        font-size: 14px;
        color: #000;
    }

    .usercenter2 .forms-listr {
        font-size: 14px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

    }

    .usercenter2 .forms-listr input {
        border: none;
        height: 30px;
        margin: 0;
        text-align: right;
        padding: 0;
    }
</style>
<div id="app">
    <!--<div id="app" v-cloak>-->
    <header>
        <ul>
            <li class="active">
                <i onclick="back()" class="icon iconfont icon-back"></i>
                <span>基本资料</span>
                <em @click="save">保存</em>
            </li>
        </ul>
    </header>
    <div class="usercenter2 fixed-header">
        <div id="main" class="flex-con mt20">
            <div class="mt20"></div>
            <div class="sjhm mt10">
                <div class="forms-list mt10" @click="getsex">
                    <div class="forms-listl"><span>性别</span></div>
                    <div class="forms-listr"><span>{{gender|getsex}}</span><i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="forms-list" @click="setage">
                    <div class="forms-listl"><span>年龄</span></div>
                    <div class="forms-listr">{{age}}<i class="icon iconfont icon-right"></i></div>
                </div>
                <div class="forms-list" @click="getaddress">
                    <div class="forms-listl"><span>籍贯</span></div>
                    <div class="forms-listr">{{province}}{{city}}{{country}}<i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="forms-list" @click="setheight">
                    <div class="forms-listl"><span>身高</span></div>
                    <div class="forms-listr">{{height}}CM
                        <i class="icon iconfont icon-right"></i></div>
                </div>
                <div class="forms-list" @click="setweight">
                    <div class="forms-listl"><span>体重</span></div>
                    <div class="forms-listr">
                        {{weight}}KG<i class="icon iconfont icon-right"></i></div>
                </div>
                <div class="forms-list" @click="setjob">
                    <div class="forms-listl"><span>职业</span></div>
                    <div class="forms-listr">{{job}}<i class="icon iconfont icon-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="../../script/mui.min.js"></script>
<script src="../../script/mui.picker.js"></script>
<script src="../../script/mui.poppicker.js"></script>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
    apiready = function () {
        api.addEventListener({
            name: 'address'
        }, function (ret, err) {
            // alert(ret.value.address)
            vm.address = ret.value.address
            vm.updateAddress(vm.address, ret.value.addid)
        });
        api.addEventListener({
            name: 'charge'
        }, function (ret, err) {
            // alert('ceshi')
            vm.getrefUserinfo()
        });
        var vm = new Vue({
            el: "#app",
            data: {
                userinfo: [],
                editAddress: false,
                userinfo2: [],
                bio: '',
                sfz: '',
                card: '',
                avatar: '',
                nickname: '',
                mobile: '',
                checked: 0,
                release: false,
                dingdan: [],
                address: '',
                appVersion: '1.0.0',
                money: 0,
                level: '普通会员',
                gender: '',
                age: '',
                height: '',
                weight: '',
                job: '',
                province: '',
                city: '',
                country: ''

            },
            mounted: function () {
                var that = this;
                if (!$api.getStorage('userInfo')) { //判断是否登录
                    if (api.systemType == "ios") {
                        var times = 0;
                    } else {
                        var times = 300;
                    }
                    api.openWin({ //未登录打开登陆窗口
                        name: 'login',
                        url: '../../html/login/login.html',
                        delay: times,
                        slidBackType: 'edge',
                        vScrollBarEnabled: false,
                        slidBackEnabled: false,
                    })
                    return
                }
                that.getrefUserinfo()
                that.getjoblist()
                that.getyue()

            },
            methods: {
                // 设置性别弹出
                setsex: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    picker.setData(
                        [{
                            value: "2",
                            text: "男"
                        }, {
                            value: "1",
                            text: "女"
                        }]
                    )
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.sex2 = SelectedItem[0].value
                        that.sex = SelectedItem[0].text
                    })
                },
                setjob: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    picker.setData(that.joblist)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.job = SelectedItem[0].value
                    })
                },
                // 设置年龄
                setage: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    var ages = []
                    for (var i = 18; i < 100; i++) {
                        var age1 = {}
                        age1.value = i
                        age1.text = i
                        ages.push(age1)
                    }
                    picker.setData(ages)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.age = SelectedItem[0].text
                    })
                },
                // 设置身高
                setheight: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    var ages = []
                    for (var i = 150; i < 251; i++) {
                        var age1 = {}
                        age1.value = i
                        age1.text = i
                        ages.push(age1)
                    }
                    picker.setData(ages)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.height = SelectedItem[0].text
                    })
                },
                // 设置体重
                setweight: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    var ages = []
                    for (var i = 30; i < 150; i++) {
                        var age1 = {}
                        age1.value = i
                        age1.text = i
                        ages.push(age1)
                    }
                    picker.setData(ages)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.weight = SelectedItem[0].text
                    })
                },

                // 获取交友目的列表
                getyue: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    $common.request(ajaxRoute.yue, {
                        data: {
                            values: {
                                token: token,
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            var data = res.data
                            that.yuelist = []
                            Object.keys(data).forEach(function (key) {
                                var datas = {}
                                datas.text = data[key]
                                datas.value = data[key]
                                that.yuelist.push(datas)
                            })
                            console.log(that.yuelist);
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                // 获取工作列表
                getjoblist: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    $common.request(ajaxRoute.job, {
                        data: {
                            values: {
                                token: token,
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            var data = res.data
                            that.joblist = []
                            Object.keys(data).forEach(function (key) {
                                var datas = {}
                                datas.text = data[key]
                                datas.value = data[key]
                                that.joblist.push(datas)
                            })
                            console.log(that.yuelist);
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                getsex: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    picker.setData([{value: '1', text: '女'}, {value: '2', text: '男'}]);
                    picker.show(function (selectItems) {
                        that.gender = selectItems[0].value
                    })
                },
                save: function () {
                    var that = this;
                    if (that.age == '') {
                        api.toast({msg: '请输入年龄', location: 'middle'});
                        return
                    }
                    if (that.height == '') {
                        api.toast({msg: '请输入身高', location: 'middle'});
                        return
                    }
                    if (that.weight == '') {
                        api.toast({msg: '请输入体重', location: 'middle'});
                        return
                    }
                    if (that.job == '') {
                        api.toast({msg: '请输入工作', location: 'middle'});
                        return
                    }
                    if (that.province == '') {
                        api.toast({msg: '怎么可以没有户籍', location: 'middle'});
                        return
                    }
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.basesave,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                gender: that.gender,
                                age: that.age,
                                province: that.province,
                                city: that.city,
                                country: that.country,
                                height: that.height,
                                weight: that.weight,
                                job: that.job,
                            }
                        }
                    }, function (ret, err) {
                        if (ret.code == 1) {
                            api.hideProgress();
                            api.toast({msg: '更新成功', location: 'middle'});
                            that.getrefUserinfo();
                        } else {
                            api.hideProgress();
                            api.toast({msg: ret.msg, location: 'middle'});
                        }
                    });
                },
                getrefUserinfo: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.center,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.hideProgress();
                            console.log(JSON.stringify(res))
                            that.gender = res.data.gender
                            that.height = res.data.height
                            that.weight = res.data.weight
                            that.province = res.data.province
                            that.city = res.data.city
                            that.country = res.data.country
                            that.job = res.data.job
                            that.age = res.data.age
                        } else {
                            api.hideProgress();
                            $api.rmStorage('userInfo')
                            $api.rmStorage('token')
                            that.toLogin();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                getaddress: function () {
                    var that = this;
                    var picker = new mui.PopPicker({
                        //三级联动
                        layer: 3
                    });
                    picker.setData(cityData3);
                    var adressStr = '';
                    picker.pickers[0].setSelectedIndex(0);
                    picker.pickers[1].setSelectedIndex(0);
                    picker.pickers[2].setSelectedIndex(0);
                    picker.show(function (SelectedItem) {
                        //将选择的省、市、区显示到屏幕上
                        that.province = SelectedItem[0].text
                        that.city = SelectedItem[1].text
                        that.country = SelectedItem[2].text

                    });
                },
                toLogin: function () {
                    console.log('logins')
                    if (api.systemType == "ios") {
                        var times = 0;
                    } else {
                        var times = 300;
                    }
                    api.openWin({ //未登录打开登陆窗口
                        name: 'login',
                        url: 'widget://html/login/login.html',
                        delay: 0,
                        slidBackType: 'edge',
                        vScrollBarEnabled: false,
                        slidBackEnabled: false,
                    })
                },
            },
            filters: {
                getTel: function (value) {
                    var phone = value
                    return phone.substr(0, 3) + "****" + phone.substr(7)
                },
                getCard: function (value) {
                    var phone = value
                    return phone.substr(0, 5) + "********" + phone.substr(12)
                },
                getchecked: function (e) {
                    var checked = ''
                    if (e == 0) {
                        checked = '审核中'
                    } else {
                        checked = '已审核'
                    }
                    return checked
                },
                getsex: function (e) {
                    var checked = ''
                    if (e == 1) {
                        checked = '女'
                    } else {
                        checked = '男'
                    }
                    return checked
                },
                filtersImg: function (img) {
                    var imgs = ajaxUrl + '/' + img
                    console.log(imgs)
                    return imgs;
                }
            }
        })
    }
</script>
